<template>
    <div class="addressList">
        <!-- 导航栏 -->
        <Back :sticky="true" title="地址列表" target="My" />
        <div>
            <Bg>
                <div>
                    <van-address-list
                        v-model="chosenAddressId"
                        :list="list"
                        default-tag-text="默认"
                        @add="goAddEditLand"
                        @edit="goAddEditLand"
                    />
                    <van-empty
                        v-if="list.length === 0"
                        description="没有地址！"
                        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                    />
                </div>
            </Bg>
        </div>
    </div>
</template>

<script>
// 导入公共组件
import Back from "../components/Back.vue";
import Bg from "../components/Bg.vue";
export default {
    name: "AddressList",
    // 注册子组件
    components: {
        Back,
        Bg
    },
    data() {
        return {
            chosenAddressId: '1',
            list: [
                // {
                //     id: '1',
                //     name: '张三',
                //     tel: '13000000000',
                //     address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
                //     isDefault: true,
                // },            
            ]
        }
    },
    methods: {
        // 跳转到 添加/编辑 地址页面 
        goAddEditLand(item) {
            

            // 跳转到 编辑页面
            if (item) {
                this.$router.push({ name: 'AddEditLand', params: { aid: item.aid } });
            }
            // 跳转到 添加页面
            else {
                this.$router.push({ name: 'AddEditLand' });
            }

        },

        //   查询地址接口
        getFindAddress() {
            this.axios({
                method: "GET",
                url: '/findAddress'
            }).then((res) => {
                
                if (res.data.code === 20000) {

                    res.data.result.forEach((v) => {
                        v.address = v.province + v.city + v.county + v.addressDetail;
                    });

                    this.list = res.data.result;

                }
            }).catch((err) => {
                
            });
        },
    },
    // 初始化钩子
    created() {
        this.getFindAddress();
    },
}
</script>

<style lang="less" scoped>
.addressList {
    position: fixed;
    top: 0;
    bottom: 50px;
    left: 0;
    right: 0;
    background-color: #f7f7f7;
    overflow: scroll;

    .back {
        z-index: 3;
    }

    /deep/ .van-address-list {
        padding: 14px 12px;

        .van-address-item {
            box-shadow: 0px 2px 2px 2px #6661;
        }
        .van-icon-success {
            display: none;
        }
    }
    button {
        background-color: #e99036;
        border-color: #e99036;
    }
}
</style>